<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        .up {
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }

        .down {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .a {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #FF8500;
        }

        .b {
            float: left;
            width: 100px;
            height: 100px;
            background-color: #ea29ff;
        }

        .c {
            /*让c布局到a、b下可以使用清除浮动，也可以为a、b添加一个父div并且为父元素设置高度*/
            width: 200px;
            height: 200px;
            background-color: #00FF00;
        }

        .ab-parent {
            height: 100px;
        }

        .indiv {
            background-color: #ff0fdd;
            float: left;
            height: 60px;
        }

        .inspan {
            background-color: #ffff00;
            height: 100px;
            width: 180px;
            float: left;
        }

    </style>
</head>
<body>
<p>浮动的目的：让div在一行显示方便布局，也可以使用display inline-block但是有很多缺陷不灵活</p>
<div class="up"></div>
<div class="down"></div>

<div class="ab-parent">
    <div class="a"></div>
    <div class="b"></div>
</div>
<div class="c"></div>

<hr>

<p>当块元素添加浮动属性后会默认转换为行内块元素属性，行内元素添加浮动会支持宽高属性</p>
<div class="indiv">
    div添加浮动自动转为行内块属性
</div>

<span class="inspan">行内元素添加浮动支持块元素属性</span>
</body>
</html>